<template>
  <div class="madp-remind-page">
    <div class="total">共有{{ page.total }}名未交流客户</div>
    <div class="container">
      <mescroll-view class="scroll-view" :showMoreBtn="page.current * page.size < page.total" :total="page.total" @getMoreData="getMoreData">
        <div class="reminds-list">
          <el-empty v-if="remindList.length < 1" :image="require('@/assets/img/no-todo.png')" description="暂无数据"></el-empty>
          <template v-else>
            <div class="reminds-item" v-for="(item, idx) in remindList" :key="idx">
              <img :src="item.avatar || $defaultAvatar" alt="" />
              <div class="name">{{ item.remark }}</div>
              <div class="btn" v-if="item.wxExternalUserid" @click="openChat(item.wxExternalUserid)">
                <img src="@/assets/img/managerView/wechat.png" alt="" srcset="" />
              </div>
            </div>
          </template>
        </div>
      </mescroll-view>
    </div>
    <back-btn />
  </div>
</template>
<script>
import MescrollView from '@/components/material/mescroll-view.vue'
import backBtn from '@/components/back-btn.vue'
import managerViewApi from '@/api/manager-view.js'
export default {
  components: { MescrollView, backBtn },
  data() {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      remindList: []
    }
  },
  created() {},
  mounted() {},
  activated() {
    this.page.current = 1
    this.getNoCommunicationPage()
  },
  methods: {
    getMoreData() {
      this.page.current++
      this.getNoCommunicationPage()
    },
    // 打开聊天页面
    openChat(id) {
      if (!id) return
      this.$wxApi.openEnterpriseChat({
        externalUserIds: [id]
      })
    },
    // 获取生日提醒列表
    getNoCommunicationPage() {
      managerViewApi
        .getNoCommunicationPage({
          wxUserId: this.$store.state.vuex_wxUserId,
          current: this.page.current,
          size: this.page.size
        })
        .then((res) => {
          if (this.page.current == 1) {
            this.remindList = res.data.data.records
          } else {
            this.remindList.push(...res.data.data.records)
          }
          this.page.total = res.data.data.total
        })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-remind-page {
  background: #fafafa;
  .total {
    padding: 8px 16px;
    background: #fff;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #202020;
  }
  .container {
    padding: 0 16px;
    .scroll-view {
      height: calc(100vh - 38px);
    }
    .reminds-list {
      padding-top: 16px;
      .reminds-item {
        background: #ffffff;
        box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 7px;
        }
        .name {
          flex: 1;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #202020;
        }
        .btn {
          width: 40px;
          height: 40px;
          border-radius: 4px;
          border: 1px solid rgba(44, 44, 44, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}
</style>